<template>
<!--  login-->
<!--  <el-button @click="login">登录</el-button>-->
  <div class="h-screen flex">
    <div class="absolute left-0 top-0 z-10 flex flex-1">
      <div class="text-slate-800 ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6">
        <img :src="icon64" class="mr-2" width="42">
        <p class="text-xl font-medium">{{ companyName }}</p>
      </div>
    </div>
    <div class="flex-1 relative block">
      <div class="background-deep size-full absolute overflow-hidden">
        <div class="login-background size-full absolute left-0 top-0" />
        <div class="h-full mr-20 flex items-center justify-center flex-col">
          <logo/>
          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">{{ title }}</div>
          <div class="mt-2" v-show="false">工程化、高性能、跨组件库的前端模版</div>
        </div>
      </div>
    </div>
    <div class="w-34% bg-white px-6 py-10 h-full flex items-center justify-center flex-col">
      <div class="mt-6 w-full sm:mx-auto md:max-w-md">
        <FormLogin v-if="loginType === 'form'" @switch="changeLoginType"/>
        <ScanLogin v-if="loginType === 'scan'" @back="changeLoginType('form')"/>
      </div>
      <div class="text-slate-500 absolute bottom-3 flex text-center text-xs">
        <div class="text-md flex-center">
          Copyright © 2024 艾迪软件
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import logo from './logo.vue'
  import FormLogin from './components/FormLogin.vue'
  import ScanLogin from './components/ScanLogin.vue'
  import { ref } from 'vue'
  import icon64 from '@/assets/icon64.png'

  const companyName = import.meta.env.VITE_COMPANY_NAME
  const title = import.meta.env.VITE_APP_TITLE
  const loginType = ref('form')
  const changeLoginType = (type: string) => {
    loginType.value = type
  }
</script>

<style scoped>
.background-deep {
  background-color: #f0f2f5;
}
.login-background {
  --primary: 212 100% 45%;
  background: linear-gradient(154deg, #07070915 30%, hsl(var(--primary) / 30%) 48%, #07070915 64%);
  filter: blur(100px);
}

</style>